<template>
  <div>
    <el-dialog v-model="props.visible" :title="props.title">
      <el-form ref="formRef" :model="form" :rules="rules">
        <div class="flex justify-between gap-x-[10px]">
          <el-form-item prop="startPage" class="flex-1">
            <div class="w-full">
              <div class="label">启动页面<span class="pl-[5px] red">*</span></div>
              <div class="flex box">
                <el-input v-model="form.startPage" placeholder="请输入启动页面" />
              </div>
            </div>
          </el-form-item>
          <el-form-item prop="params" class="flex-1">
            <div class="w-full">
              <div class="label">启动参数<span class="pl-[5px] red">*</span></div>
              <div class="flex box">
                <el-input v-model="form.params" placeholder="请输入启动参数" />
              </div>
            </div>
          </el-form-item>
          <el-form-item prop="remark" class="flex-1">
            <div class="w-full">
              <div class="label">链接备注<span class="pl-[5px] red">*</span></div>
              <div class="flex box">
                <el-input v-model="form.remark" maxlength="100" placeholder="请输入启动页面" />
              </div>
            </div>
          </el-form-item>
        </div>
        <div class="text-[12px] text-[#ccc] tips">首次添加资产时只能添加一条链接，审核通过后可以添加多条</div>
      </el-form>
      <template #footer>
        <div class="btnbox">
          <el-button @click="cancelLink">取消</el-button>
          <el-button type="primary" @click="saveInfo">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  visible: boolean;
  title: string;
  info?: LinkType;
}>();

const emit = defineEmits(['closeLinkBox', 'getData']);

const formRef = ref();

interface LinkType {
  startPage: string;
  params: string;
  remark: string;
}
interface LinkTypeQuery {
  startPage?: string;
}

const initForm: LinkType = {
  startPage: '',
  params: '',
  remark: ''
};

const data = reactive<PageData<LinkType, LinkTypeQuery>>({
  form: { ...initForm },
  queryParams: {},
  rules: {
    startPage: [{ required: true, message: '请输入启动页路径', trigger: 'blur' }],
    params: [{ required: true, message: '请输入启动参数', trigger: 'blur' }],
    remark: [{ required: true, message: '请输入备注', trigger: 'blur' }]
  }
});
const { form, queryParams, rules } = toRefs(data);

watch(
  () => props.info,
  () => {
    if (props.info.startPage) {
      form.value = props.info;
    }
  }
);

const cancelLink = () => {
  emit('closeLinkBox');
};
const saveInfo = () => {
  formRef.value?.validate((valid) => {
    if (valid) {
      cancelLink();
      emit('getData', form.value);
    }
  });
};
</script>

<style lang="scss" scoped></style>
